import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { Layout, Table, Input, Button, InputNumber, Popconfirm, Space, Modal} from 'antd';

import NodeForm from './NodeForm'

import './style.scss';

const { Content } = Layout;
const { Column } = Table;

@withRouter
class nodeManage extends Component{
  constructor(props) {
    super(props);
    this.add = React.createRef();
    this.state={
      page: 10,
      searchValue: '',
      visible: false,
    
    };
  }

  changePage = (value) => {
    this.setState({page:value});
  }
  
  setSearchValue = (e) => {
    this.setState({searchValue: e.target.value})
  }

  handleSearch = () => {
    let userName = "admin";//待修改
    this.props.searchApi(userName,this.state.searchValue)
  }

  resetSearch = () => {
    this.setState({searchValue:''});
    let userName = "admin";//待修改
    this.props.getConfig(userName);
  }

  deleteNode = (id) => {
    this.props.deleteItem(id)
  }

  componentDidMount(){
    this.props.getNodes()
  };

  componentWillUnmount(){
    this.props.resetData()
  }

  handleOk = ()=>{
    this.add.formRef.current.validateFields() // 手动触发表单校验
      .then(res=>{ 
        let params = this.add.formRef.current.getFieldsValue()
        this.props.addItem(params)
      })
      .catch(err=>console.log(err.errorFields))
  }

  handleCancel = () => {
    this.add.formRef.current.resetFields()
    this.setState({visible: false})
  }
  

  render(){
    const { page, visible } = this.state;
    const columns = [
      {
        title: "序号",
        dataIndex: "index",
        key: 'index',
        render: (text, record, index)=><span>{index+1}</span>
      },
      {
        title: "IP地址",
        dataIndex: "ip",
        key: 'ip'
      },
      {
        title: "端口名称",
        dataIndex: "hostName",
        key: 'hostName'
      },
      {
        title: "状态",
        dataIndex: "nodeStatus",
        key: 'nodeStatus'
      },
      {
        title: "节点类型",
        dataIndex: "nodeType",
        key: 'nodeType'
      },
      {
        title: '角色',
        dataIndex: 'roler',
        key: 'roler'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        render: (text, record) => 
          <Space>
            <Popconfirm
              title="是否确认修改该节点的状态?"
              onConfirm={e=>this.props.changeNodeStatus(record.id)}
            >
              <a>{record.nodeStatus==='正常'?'停用':'启用'}</a>
            </Popconfirm>
            <a  onClick={e=>this.edit}>编辑</a>
            <Popconfirm
              title="删除后数据不可恢复,确认删除吗?"
              onConfirm={e=>this.deleteNode(record.id)}
            >
              <a>删除</a>
            </Popconfirm>
          </Space>
      },
    ]
    return (
      <Content style={{marginTop:12}}>
        <div style={{fontWeight: 'bold'}}>节点资源
          <Button type="primary" style={{float: "right"}} onClick={()=>this.setState({visible: true})}>新增</Button>
        </div>
        <div className="table-box" style={{marginTop:24}}>
          <Table 
          pagination={{pageSize:page,showSizeChanger:false}}
          dataSource={this.props.nodeData}
          columns={columns}
          />
          <div className={this.props.nodeData.length>0?'footer':'withoutPagination'}
          >
            显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{this.props.nodeData.length}项
          </div>
        </div>
        <Modal visible={visible}
          title="创建新节点"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              取消
            </Button>,
            <Button key="submit" type="primary" loading={this.props.loading} onClick={this.handleOk}>
              创建
            </Button>,
          ]}
        >
          <NodeForm onRef={(ref)=>{this.add=ref}}></NodeForm>
        </Modal>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    nodeData: state.getIn(['node','nodeData']).toJS(),
    loading: state.getIn(['node', 'buttonLoading']),
  }
}


const mapDispatchToProps = (dispatch) => ({
  getNodes(){
    dispatch(actionCreators.getNodes());
  },
  deleteItem(id){
    dispatch(actionCreators.deleteItem(id))
  },
  addItem(params){
    dispatch(actionCreators.addItem(params))
  },
  resetData(){
    dispatch(actionCreators.clearData())
  },
  changeNodeStatus(id){
    dispatch(actionCreators.changeNodeStatus(id))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(nodeManage);